<template>
  <div>
    <el-dialog class="dialog" :visible.sync="visible" :width="width" :modal-append-to-body="false" :show-close="true"
      :close-on-click-modal="false" :before-close="hide" :style="{ '--el-dialog-height': height }">
      <template slot="title">
        <div class="close" @click="hide"></div>
        <div class="dialog-header">
          <div class="header-title">{{params.type}}</div>
        </div>
      </template>
      <div class="dialog-body">
        <div class="handle-box">
          <el-button type="primary" @click="showInsuranceEditDialog('add')">新增</el-button>
        </div>
        <div class="table-box">
          <el-table :data="insuranceListData" border style="width: 100%" height="100%">
            <el-table-column prop="insurance_name" label="保险名称" align="center" />
            <el-table-column prop="protection_amount" label="保障金额（万元）" align="center" />
            <el-table-column label="操作" width="120px" align="center">
              <template slot-scope="{row}">
                <el-link type="primary" :underline="false" @click="showInsuranceEditDialog('edit',row)">修改</el-link>
                <el-link type="danger" :underline="false" @click="insuranceDelete(row)">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
    <InsuranceEditDialog :visible.sync="dialogVisible" :params="dialogParams" width="450px" height="331px"
      @success="getData" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import * as api from '@/views/AiBenefitAssociation/RecommendedInsurance/api.js';
import InsuranceEditDialog from './InsuranceEditDialog.vue';

export default {
  name: 'InsuranceListDialog',
  components: { InsuranceEditDialog },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: {},
    },
    width: {
      type: String,
      default: '80%',
    },
    height: {
      type: String,
      default: '915px',
    },
  },
  data() {
    return {
      dataLoading: false,
      insuranceListData: [],
      dialogVisible: false,
      dialogParams: {},
    };
  },
  watch: {
    visible: {
      handler(value) {
        if (value) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  computed: {
    ...mapGetters(['userId']),
  },
  methods: {
    hide() {
      this.$emit('update:visible', false);
      this.$emit('hide');
    },
    getData() {
      api.getPersonaInsuranceList({ insuranceType: this.params.type }).then((res) => {
        this.insuranceListData = res.rows;
      });
    },
    showInsuranceEditDialog(handle, row) {
      this.dialogVisible = true;
      this.dialogParams = { handle, type: this.params.type, formData: row };
    },
    insuranceDelete(row) {
      api.deletePersonaInsuranceById({ id: row.id }).then((res) => {
        this.$message.success(res.msg);
        this.getData();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import './dialog.scss';
@import '@/assets/styles/mixin.scss';

.dialog-body {
  // display: flex;
  // flex-direction: column;
}

.handle-box {
  margin-bottom: 15px;
}

.table-box {
  width: 100%;
  height: calc(100% - 60px);

  ::v-deep .el-table {
    .el-table__cell {
      padding: 15px 0;
    }

    // .el-table__header-wrapper {
    //   th {
    //     height: 50px;
    //   }
    // }

    .cell {
      font-size: 16px;
    }

    .el-link {
      font-size: 16px;
      margin-right: 10px;
      &:last-child {
        margin-right: 0px;
      }
    }
  }
}
</style>
